<template>
  <div>
    <template class="c-field" v-if="display">{{ display }}</template>
    <template v-else>
      <span class="c-field-placeholder">{{ placeholder }}</span>
    </template>
    <van-popup
      v-model="visible"
      position="bottom"
      get-container="body"
      class="c-qbcpka"
    >
      <van-area
        title="所在地区"
        :area-list="areaList"
        @confirm="onConfirm"
        @cancel="onCancel"
        :value="valueArea"
        :columns-num="columnsNum"
      ></van-area>
    </van-popup>
  </div>
</template>
<script>
import comAPI from '@/services/h5/common'
export default {
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    defaultValue: {
      type: Array,
      default: () => []
    },
    value: {
      type: Array,
      default: () => []
    },
    columnsNum: {
      type: Number,
      default: 3
    },
    areaList: {
      type: Object,
      default: () => {
        return {
          city_list: {},
          county_list: {},
          province_list: {}
        }
      }
    }
  },
  watch: {
    value: function (value) {
      this.display = this.getDisplay(value)
    }
  },
  computed: {
    display: {
      get: function () {
        if (!this.value.length) return ''
        if (!Object.keys(this.areaList).length) return ''
        const { province_list, city_list, county_list } = this.areaList
        const [provinceCode, cityCode, countyCode] = this.value
        let nameList = [
          province_list[provinceCode],
          city_list[cityCode],
          county_list[countyCode]
        ]
        this.columnsNum == 2 &&
          (nameList = [province_list[provinceCode], city_list[cityCode]])
        return nameList.filter(name => name).join(' ')
      },
      set: function (value) {
        console.log(
          'dfsdsf=================ssssssssssssssssssssssss==========',
          value
        )
      }
    },
    valueArea() {
      return this.value.length ? this.value.slice(-1)[0] : ''
    }
  },
  data() {
    return {
      visible: false
      // display: ''
      // areaList: {
      //   city_list: {},
      //   county_list: {},
      //   province_list: {}
      // }
    }
  },
  async mounted() {},
  methods: {
    getDisplay(value) {
      if (!value.length) return ''
      if (!Object.keys(this.areaList).length) return ''
      const { province_list, city_list, county_list } = this.areaList
      const [provinceCode, cityCode, countyCode] = value
      const nameList = [
        province_list[provinceCode],
        city_list[cityCode],
        county_list[countyCode]
      ]
      return nameList.filter(name => name).join(' ')
    },
    async init() {
      // console.log('ddddddd', areaList)
      let [provice, city, country] = await Promise.all([
        comAPI.getAreaList('01'),
        comAPI.getAreaList('02'),
        comAPI.getAreaList('03')
      ])
      this.areaList = {
        city_list: this.getAreaData(city),
        county_list: this.getAreaData(country),
        province_list: this.getAreaData(provice)
      }
    },
    getAreaData(res) {
      if (res.data && res.data.code === 1000) {
        let data = res.data.data
        let obj = {}
        data.forEach(item => {
          obj[item.placeCode] = item.placeName
        })
        return obj
      }
    },
    onConfirm(val) {
      let value = []
      val.forEach(item => {
        value.push(item.code)
      })
      this.$emit('confirm', value)
      this.display = this.getDisplay(value)
      this.visible = false
    },
    onCancel() {
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
.c-field {
  font-size: 15px;
  color: #333;
}
.c-field-placeholder {
  color: #999;
  font-size: 15px;
}
.c-qbcpka {
  height: 321px;
  border-radius: 13px 13px 0 0;
  text-align: center;
  padding: 15px;
  box-sizing: border-box;
  &-title {
    font-size: 18px;
    color: #333;
    font-weight: bold;
  }
  &-confirm,
  &-cancel {
    color: @c-color-primary;
    font-size: 14px;
  }
  &-item {
    font-size: 15px;
    color: #666;
    margin-top: 15px;
    padding-bottom: 10px;
    // border-bottom: 0.5px solid #e9e9e9;
    &:last-child {
      border-bottom: none;
    }
  }
  &-item-active {
    color: @c-color-primary;
  }
  /deep/.van-picker__confirm,
  /deep/.van-picker__cancel {
    color: @c-color-primary;
  }
}
</style>
